<template>
	<view class="">
		<view class="money">
			{{money}}
		</view>
		<view class="money_title">
			通卡余额
		</view>
		<view class="money_box">
			<view class="money_box_item " :class="moneyIndex==index?'select':''" v-for="(item,index) in moneyAll" :key="item"
				@click="indexClick(item,index)">
				<block v-if="item > 0">
					<view class="num">
						{{item}}
					</view>
					<view class="yuan">
						元
					</view>
				</block>
				<block v-if="item < 0">
					<view class="customize">
						自定义金额
					</view>
				</block>
			</view>
		</view>
		<view class="describe">
			<view class="describe_title">
				门店卡充值说明:
			</view>
			<view style="margin-top: 20rpx;">
				<view class="describe_characters">
					1、预充值均属于特殊商品，出售不退；
				</view>
				<view class="describe_characters">
					2、黑游台球平台充值金额可在黑游全国任意门店消费、具体定价以门店定价为准；
				</view>
				<view class="describe_characters">
					3、黑油平台会员卡与门店会员卡余额独立核算，补课互让；
				</view>
			</view>

		</view>
		<view class="shop_view">
			<view class="shop_view_name">
				通卡优惠店铺
			</view>
			<view class="flex justify-between align-center">
				<view class="more">
					查看更多
				</view>
				<view class="">
					>
				</view>
			</view>
		</view>
		<view class="position_view">
			<view class="position_name">
				<image src="../static/position.png" mode=""></image>
				<view class="position_view_name">
					黑游台球-济宁万达广场
				</view>
			</view>

			<view class="flex time_view">
				<view class="time">
					全天六折
				</view>
				<view class="time">
					07:00-12:00
				</view>
				<view class="time">
					4折
				</view>
			</view>
			<button class="button_view" @click="recharge">立即充值</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	let {
		proxy
	} = getCurrentInstance()
	let moneyAll = reactive([99, 200, 1000, 2000, 2500, 3000, -1])
	let moneyIndex = ref(0)
	let money = ref(0)
	let userIfon = reactive(null)

	function indexClick(item, index) {
		if (item > 0) {
			moneyIndex.value = index
			money.value = item
		}
		console.log(item, index)
	}

	function recharge() {
		if (money.value <= 0) {
			return
		}
		proxy.$https('/weixin_pay_api', {
			wx_openid: userIfon.open_id,
			amount: money.value,
			description: ""
		}).then(res => {
			console.log(res.pay_sign, 'res@@@@')

			uni.requestPayment({
				"timeStamp": res.time_stamp,
				"nonceStr": res.nonce_str,
				"package": res.package,
				"signType": res.sign_type,
				"paySign": res.pay_sign,
				"success": function(res) {
					console.log(res, 'success')
				},
				"fail": function(res) {
					console.log(res, 'fail')
				},
			})
			// data.list = res
		})
	}
	onShow(() => {
		userIfon = getApp().globalData.userIfon
		// getList()oW93F6-YsREbJfJCHEUsNKMD1R0
		console.log(userIfon, 'userIfon')
	})
</script>

<style scoped lang="scss">
	.money {
		margin: 20rpx 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 80rpx;
		color: #333333;
	}

	.money_title {
		margin: 0 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #666666;
	}

	.money_box {
		margin: 34rpx 36rpx 0 38rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx 20rpx;

		/* 盒子之间的间隔距离，可按需调整 */
		.money_box_item {
			width: 212rpx;
			height: 142rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #D9D9D9;
			display: flex;
			align-items: center;
			justify-content: center;

			&.select {
				background: rgba(16, 199, 110, 0.1);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 2rpx solid rgba(63, 247, 158, 1);

				.num {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 60rpx;
					color: #10C76E;
					line-height: 70rpx;
				}

				.yuan {
					margin-top: 20rpx;
					margin-left: 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #10C76E;
				}
			}

			.num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 60rpx;
				color: #999999;
			}

			.yuan {
				margin-top: 20rpx;
				margin-left: 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
			}

			.customize {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #999999;
			}
		}
	}

	.describe {
		margin: 40rpx 38rpx 0 38rpx;

		.describe_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #666666;
		}

		.describe_characters {

			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin-top: 8rpx;
		}
	}

	.shop_view {
		margin: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.shop_view_name {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}

		.more {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
		}
	}

	.position_view {
		margin: 0 32rpx;
		width: 686rpx;
		height: 140rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 24rpx;

		.position_name {
			display: flex;
		}

		.position_view_name {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			margin-left: 12rpx;
		}

		.time_view {
			margin-top: 12rpx;
			margin-left: 52rpx;
		}

		.time {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.button_view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630rpx;
		height: 96rpx;
		background: #10C76E;
		box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(255, 255, 255, 0.25);
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		border: 2rpx solid rgba(16, 199, 110, 0.3);
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 40rpx;
		color: #FFFFFF;
		margin-top: 64rpx;
	}
</style>